<template>
  <my-popup ref="mypopup">
    <view class="bottom-pop">
      <view class="top-tab-box">
        <topNav002
          :rightContent="'close'"
          :topTabList="topTabList"
          :activeTab="activeTabCode"
          @closeFn="closeFn"
          @activeTabChange="activeTabChange"
        ></topNav002>
      </view>
      <!-- 日期滑动选择 -->
      <setOptions003
        v-if="activeTabCode == '1'"
        :initDate="initDate"
        :optional="optional"
        @changeDate="changeDateFn"
      ></setOptions003>

      <my-calendar-scroll
        v-if="activeTabCode == '2'"
        class="uni-calendar--hook"
        :date="info.date"
        :showMonth="true"
        @change="change"
      />

      <my-calendar-scroll
        v-if="activeTabCode == '3'"
        class="uni-calendar--hook"
        :clear-date="true"
        :date="info.date"
        :insert="info.insert"
        :lunar="info.lunar"
        :startDate="info.startDate"
        :endDate="info.endDate"
        :range="info.range"
        @change="change"
      />

      <view class="operation-box">
        <view class="confirm-btn" @click="confirmFn">确定</view>
      </view>
    </view>
  </my-popup>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  initDate: {
    type: Array,
    default: () => {
      return [];
    },
  },
  optional: {
    type: String,
    default: "",
  },
  topTabList: {
    type: Array,
    default: () => {
      return [
        {
          title: "滚动",
          code: "1",
        },
        {
          title: "日历",
          code: "2",
        },
        {
          title: "日历范围",
          code: "3",
        },
      ];
    },
  },
});

const emit = defineEmits(["confirmDate"]);
const mypopup = ref(null);
const activeValue = ref("");
const activeTabCode = ref("1");

// 点击确认按钮
const confirmFn = () => {
  emit("confirmDate", activeValue.value); //确认后才会改变选中时间
  closeFn();
};

const getDate = (date, AddDayCount = 0) => {
  if (!date) {
    date = new Date();
  }
  if (typeof date !== "object") {
    date = date.replace(/-/g, "/");
  }
  const dd = new Date(date);

  dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

  const y = dd.getFullYear();
  const m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
  return {
    fullDate: y + "-" + m + "-" + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay(),
  };
};
const info = ref({
  lunar: true,
  range: true,
  insert: true,
  date: getDate(new Date()).fullDate,
  startDate: getDate(new Date(), -360).fullDate,
  endDate: getDate(new Date(), 60).fullDate,
});
// 日期弹窗改变结果，例如：[2025, 10, 29]
const changeDateFn = (dateArray) => {
  activeValue.value = dateArray;
  // emit("confirmDate", activeValue.value);   打开后，选中时间会随滚动改变
};

// 日历格式选中
const change = (e) => {
  // console.log(e);
  if (e.range.after) {
    activeValue.value = [e.range.before, e.range.after];
  } else {
    activeValue.value = [e.year, e.month, e.date];
  }
};

// 顶部tab切换
const activeTabChange = (code) => {
  activeTabCode.value = code;
  //   console.log(code);
};

// 打开弹窗
const openPopup = () => {
  mypopup.value.open("bottom");
  // 设置日历的初始事件
  setTimeout(() => {
    if (props.initDate) {
      info.value.date = `${props.initDate[0]}-${props.initDate[1]}-${props.initDate[2]}`;
    }
  }, 100);
};

// 关闭
const closeFn = () => {
  mypopup.value.close();
};
defineExpose({
  openPopup,
});
</script>

<style scoped lang="less">
/deep/ .top-tab-components {
  height: 80rpx;
}
/deep/ .tab-box {
  height: 100%;
  .tab-item {
    padding: 0 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .slider-style {
    width: 70rpx !important;
    height: 4rpx !important;
    background: #000 !important;
    bottom: 0 !important;
  }
}

.bottom-pop {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  height: 1060rpx;

  .operation-box {
    position: absolute;
    bottom: 20rpx;
    height: 100rpx;
    padding: 0 40rpx;
    width: 100%;
    margin-top: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .confirm-btn {
      width: 80%;
      height: 90rpx;
      background: #007bfe;
      border-radius: 10rpx;
      color: #fff;
      line-height: 90rpx;
      text-align: center;
    }
  }
  .top-tab-box {
    border-bottom: 1px solid #eee;
  }
}
</style>
